<template>
  <div class="helpUser-out-search selectInner" @click.stop="showModel">
    <section class="input-box-in">
      <div class="input-in">
        <div class="title-input-box">
          <el-input :placeholder="placeholder ? placeholder : '请输入关键字进行搜索'" :disabled="$route.query.businessBoolean == 'false'" v-model="searchData[mName]" class="title-input" v-on:input="getMess" v-on:blur="handleBlur">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="mess-box" v-show="messDate.length !== 0 && isShow">
          <a v-for="item in messDate" class="nav-r" @click.stop="setSelect(item)">
            <template v-if="paymentType == 'strucName'">
              <span>
                {{ item.structureName }}
              </span>
            </template>
            <template v-else="paymentType == 'formName'">
              <span>
                {{ item.formName }}
              </span>
            </template>
          </a>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import $ from 'jquery';
  import { procConfigCreate, procConfigsTructList, procConfigsFormList } from '../../api/process';
  export default {
    props: ['placeholder', 'searchData', 'mName', 'paymentType'],
    data() {
      return {
        isShow: false,
        dialogVisible: false,
        messDate: [],
      };
    },
    mounted() {
      var _self = this;
      $('body').click(function () {
        _self.messDate = [];
        _self.isShow = false;
      });
    },
    methods: {
      handleBlur() {
        // setTimeout(() => {
        //   if (!this.searchData[this.mCode]) {
        //     this.searchData[this.mName] = "";
        //   }
        // }, 30);
      },
      async getMess() {
        var value = this.searchData[this.mName];
        this.searchData[this.mCode] = '';
        if (value === '') {
          this.messDate = [];
          return false;
        }
        this.messDate = [];

        this.isShow = true;
        let res =
          this.paymentType == 'strucName'
            ? await procConfigsTructList({
                structureName: value,
              })
            : await procConfigsFormList({
                formName: value,
              });
        if (res.success) {
          console.log(res);
          if (res.rows.length) {
            var datas = res.rows;
            this.messDate = datas;
            this.isShow = true;
            if (!datas.length) {
              if (this.mCode) {
                this.searchData[this.mCode] = '';
              }
              if (this.mName) {
                this.searchData[this.mName] = '';
              }
            }
          }
        } else {
          this.$message.error(res.result.message);
        }
      },
      showModel() {
        // this.isShow = true
      },
      setSelect(item) {
        if (this.paymentType == 'formName') {
          this.searchData[this.mName] = item.formName;
          this.$emit('get-formKeyInfo', item);
        } else if (this.paymentType == 'strucName') {
          this.searchData[this.mName] = item.structureName;
          this.$emit('get-structureInfo', item);
        }

        this.isShow = false;
      },
    },
  };
</script>
<style lang="scss">
  .helpUser-out-search {
    width: 100%;
    .input-new-tag.tag-box {
      min-width: 220px !important;
    }
    .input-box-in {
      width: 100%;
      display: flex;
    }

    .input-in {
      flex: 1;
      position: relative;

      .title-input-box {
        .title-input {
          width: 100%;

          input {
            width: 100%;
            height: 36px;
          }
        }
      }

      .mess-box {
        position: absolute;
        left: 0;
        top: 30px;
        width: 100%;
        max-height: 300px;
        overflow: auto;
        box-sizing: border-box;
        border-radius: 3px;
        padding: 5px 0;
        border: 1px solid #c0ccda;
        text-align: left;
        background: #ffffff;
        z-index: 10;

        .nav-r {
          display: block;
          padding: 0 10px;
          font-size: 14px;
          line-height: 24px;
          color: #333333;
          cursor: pointer;
          white-space: nowrap;
          span {
            padding-right: 20px;
            white-space: nowrap;
            display: inline-block;
          }
          span:nth-of-type(1) {
            width: 60px;
          }
          span:nth-of-type(2) {
            min-width: 150px;
          }
          &:hover {
            background: #c0ccda;
          }
        }
      }
    }

    .tel-box {
      width: 200px;
      margin-left: 15px;

      input {
        width: 100%;
        height: 36px;
      }
    }

    .nav-disabled {
      color: #999999;
    }
  }
  .selectInner .el-input--small .el-input__inner {
    height: 32px !important;
    line-height: 32px;
  }
</style>
